<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/lib/swiper.min.css"/>
<link rel="stylesheet" type="text/css" href="css/lib/doumee.css"/>
<link rel="stylesheet" type="text/css" href="css/lib/picker.css"/>
<script src="js/lib/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/vue-2.5.17.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>



<div id="areaMask" v-if="showArea">
	<div class="dm-mask"></div>
	<div class="dm-picker">
		<div class="picker-header bottom-line">
			<a class="dm-left cancel">取消</a>
			<a class="dm-right enter" @click="enterArea">确定</a>
		</div>
		<div class="picker-mod flex-row">
			<div class="swiper-container level-1 flex-full">
				<div class="swiper-wrapper">
					<div class="swiper-slide" v-for='item in province' :data-id='item.code'>{{item.name}}</div>
				</div>
			</div>
			<div class="swiper-container level-2 flex-full">
				<div class="swiper-wrapper">
					<div class="swiper-slide" v-for='item in city' :data-id='item.code'>{{item.name}}</div>
				</div>
			</div>
			<div class="swiper-container level-3 flex-full">
				<div class="swiper-wrapper">
					<div class="swiper-slide"  v-for='item in area' :data-id='item.code'>{{item.name}}</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">

var area = new Vue({
	el:'#areaMask',
	data:{
		swiper:[],
		showArea:true,
		check:[0,0,0],
		province:null,
		city:null,
		area:null,
		selArea:null,
	},
	methods:{
		//省份
		areaPicker:function(){
			var that = this;
			$.getJSON('js/dm-area.json',function(res){
				that.province = res.province;
				that.loadCity(res.province[that.check[0]].code,res);
			});
		},
		//城市
		loadCity:function(id,data){
			var that = this;
			that.city = [];
			for(i in data.city){
				if(data.city[i].provinceCode == id){
					that.city.push(data.city[i]);
				};
			};
			var cityId = that.city[that.check[1]].code;
			that.loadArea(cityId,data);
		},
		//市区
		loadArea:function(id,data){
			var that = this;
			that.area = [];
			for(i in data.area){
				if(data.area[i].cityCode == id){
					that.area.push(data.area[i]);
				};
			};
		},
		//swiper组件
		getSwiper:function(){
			var that = this;
			for(let i=0;i<3;i++){
				var mySwiper = new Swiper('.dm-picker .level-'+(i+1),{
					direction : 'vertical',
					slidesPerView:5,
					centeredSlides:true,
					effect: 'coverflow',
					observer:true,
					initialSlide: that.check[i],
					coverflowEffect: {
					    rotate: 7,
					    stretch:-10,
					    depth: 100,
					    slideShadows: false
					},
					on:{
						slideChange:function(){
							i != 2 ? that.swiper[i+1].slideTo(0,0, false) : '';
							that.check[i] = this.activeIndex;
							that.areaPicker();
						},
					},
				});
				that.swiper.push(mySwiper);
			};
		},
		//确认选择
		enterArea:function(){
			var that = this;
			that.selArea = [];
			$("#areaMask").find('.swiper-container').each(function(){
				let node = $(this).find('.swiper-slide-active').text();
				that.selArea.push(node);
			});
			console.log(that.selArea);
		},
		
	},
	created:function(){
		
	},
	mounted:function(){
		this.getSwiper();
		this.areaPicker();
	},
});


</script>

</body>
</html>
